<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
		
	</style>
</head>
<body>
	
	<canvas id="canvas" width="250" height="250"></canvas>
	
	<script>
		var canvas = document.getElementById('canvas'),
				context = canvas.getContext('2d'),
				centerX = canvas.width/2,
				centerY = canvas.height/2,
				
				rad = (Math.PI*1.5)/100,
				score = 50;  //传入的进度
		
		//绘制红色内圈
		function bgCircle(){
			context.save();
			context.beginPath();
			context.lineCap="round";
			context.lineWidth = 10; //设置线宽
			context.strokeStyle = "#FF5722";
			context.arc(centerX, centerY, 100 , Math.PI*0.25, Math.PI*0.75, true);
			context.stroke();
			context.closePath();
			context.restore();
		}
		//绘制白色运动外圈
		function runCircle(n){
			context.save();
			context.beginPath();
			context.lineCap="round";
			context.lineWidth = 10; //设置线宽
			context.strokeStyle = "#fff";
			context.arc(centerX, centerY, 100 , Math.PI*0.75, Math.PI*0.75 + rad*n, false);
			context.stroke();
			context.closePath();
			context.restore();
		}
		//绘制文字
		function font(n){
			context.save();
			context.fillStyle = "#009688";
			context.font = "30px Arial";  //设置字体大小和字体
			context.fillText(n.toFixed(0)+"%", centerX-25, centerY+10);
			context.textAlign="center";
			context.textBaseline="middle";
			context.restore();
		}
		
		(function drawFrame(){
			window.requestAnimationFrame(drawFrame);
			context.clearRect(0, 0, canvas.width, canvas.height);
			font(score);
			bgCircle();
			runCircle(score);
			if(score > 100) score = 0;
			score += 0.5;
		}());
		
		
		
	</script>
</body>
</html>